<template>
  <div class="personalHome-container">

    <nav-menu></nav-menu>

    <el-tree :highlight-current="true" :data="data" :props="defaultProps" @node-click="handleNodeClick" :render-content="renderContent">
    </el-tree>

    <el-main style="position: absolute;width: 85%;height:84%;right: 0;padding: 0">
      <router-view></router-view>
    </el-main>


  </div>
</template>

<script>
  export default {
    name: "MainPage",
    data(){
      return{
        data: [{
          label: '客机管理',
          icon: 'el-icon-setting',
          router:'/plane'
        },{
          label: '航班管理',
          icon: 'el-icon-position',
          router:'/flight'
        },{
          label: '机票管理',
          icon: 'el-icon-postcard',
          router: '/ticket'
        },{
          label: '订单管理',
          icon: 'el-icon-document-checked',
          router:'/order'
        },{
          label: '退票管理',
          icon: 'el-icon-document-delete',
          router:'/refund'
        }
        ],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods:{
      renderContent:function (h,{node,data,store}) {
        let addElement = arguments[0];
        return addElement('span',[
          addElement('i',{class:data.icon}),
          addElement('span'," "),
          addElement('span',arguments[1].node.label)
        ]);
      },
      handleNodeClick(node){
        this.$router.push(node.router)
      }
    },
  }
</script>

<style>

  *{
    margin: 0;
    padding: 0;
  }

  .personalHome-container .el-tree{
    position: absolute;
    width: 15%;
    height: 83.9%;
    border-right: 1px dashed #607D8B;
  }

  .personalHome-container .el-tree-node__content{
    height: 45px;
    margin-bottom: 10px;
    border-radius: 5px;
  }

  .personalHome-container .el-tree-node__content span{
    font-size: 15px;
  }

  .personalHome-container .el-tree-node__content:hover{
    background-color: #e0e0e0;
  }

  .personalHome-container .el-tree-node__label{
    padding-left: 40px;
  }

  .el-icon-setting,
  .el-icon-position,
  .el-icon-postcard,
  .el-icon-document-checked,
  .el-icon-document-delete{
    padding-right: 10px;
  }


</style>
